<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>

<body>
    <select name="sheng" id=""></select>
    <select name="shi" id=""></select>
    <select name="xian" id=""></select>
    <script type="text/javascript">
    var citys = document.getElementsByTagName('select');
    //sheng
    var shi = [];
    shi['北京'] = ['北京市'];
    shi['天津'] = ['天津市'];
    shi['河北'] = ['张家口市', '石家庄市', '衡水市', '沧州市'];
    shi['甘肃'] = ['兰州市', '天水市'];
    var xian = [];
    xian['北京市'] = ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"];
    xian['天津市'] = ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"];
    xian['张家口市'] = ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"];
    xian['石家庄市'] = ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"];
    xian['衡水市'] = ["桃城区", "冀州市", "深州市", "枣强县", "枣强镇", "武邑县", "武邑镇", "武强县", "武强镇", "饶阳县", "饶阳镇", "安平县", "安平镇", "故城县", "郑口镇", "景县", "景州镇", "阜城县", "阜城镇"];
    xian['沧州市'] = ["运河区", "新华区", "泊头市", "任丘市", "黄骅市", "河间市", "沧县", "沧州市新华区", "青县", "清州镇", "东光县", "东光镇", "海兴县", "苏基镇", "盐山县", "盐山镇", "肃宁县", "肃宁镇", "南皮县", "南皮镇", "吴桥县", "桑园镇", "献县", "乐寿镇", "孟村回族自治县", "孟村镇"];
    xian['兰州市'] = ["城关区", "七里河区", "西固区", "安宁区", "红古区", "永登县", "城关镇", "皋兰县", "石洞镇", "榆中县", "城关镇"];
    xian['天水市'] = ["秦州区", "麦积区", "清水县", "永清镇", "秦安县", "兴国镇", "甘谷县", "大像山镇", "武山县", "城关镇", "张家川回族自治县", "张家川镇"];
    //遍历shi

    var str = '<option value="">请选择省份</option>';
    for (var i in shi) {
        str += '<option value="' + i + '">' + i + '</option>';
    };
    citys[0].innerHTML = str;
    citys[0].onchange = function() { //第一个下拉框绑定onchange事件
        var nshi = this.value; //获取选择的值,shi[值]
        var str = '<option value="">请选择地级市</option>';
        for (var i = 0; i < shi[nshi].length; i++) {
            var ns = shi[nshi][i];
            str += '<option value="' + ns + '">' + ns + '</option>';
        };
        citys[1].innerHTML = str;
        citys[2].innerHTML = ""
    }
    citys[1].onchange = function() { //第二个下拉框绑定事件
        var ns = this.value;
        var str = '<option value="">请选择地级县区</option>';
        for (var i = 0; i < xian[ns].length; i++) {
            var nss = xian[ns][i];
            str += '<option value="' + nss + '">' + nss + '</option>';
        };
        citys[2].innerHTML = str;
    }
    </script>
</body>

</html>